<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter();

var activePath = ref('');
const setActivePath = () => {
    activePath.value = router.currentRoute.value.path;
}

setActivePath();

router.beforeEach((to, from, next) => {
    activePath.value = to.path;
    next();
})

</script>

<template>
    <el-container style="padding:0px;">
        <el-header>
            <el-menu mode="horizontal" :default-active="activePath" background-color="#5b9ef0" text-color="#fff"
                active-text-color="#fff" router>
                <span class="main-title">视频AI智能应用平台</span>
                <el-menu-item index="/center">
                    <el-icon :size="20">
                        <Histogram />
                    </el-icon>
                    <template #title>
                        <span>系统概况</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="/alarm">
                    <el-icon :size="20">
                        <MessageBox />
                    </el-icon>
                    <template #title>
                        <span>智能告警</span>
                    </template>
                </el-menu-item>

                <el-menu-item index="/task">
                    <el-icon :size="20">
                        <Platform />
                    </el-icon>
                    <template #title>
                        <span>模型推理</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="/train">
                    <el-icon :size="20">
                        <Operation />
                    </el-icon>
                    <template #title>
                        <span>模型训练</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="/screen"><el-icon :size="20">
                        <FullScreen />
                    </el-icon>
                    <template #title>
                        <span>大屏展示</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="/system">
                    <el-icon :size="20">
                        <Setting />
                    </el-icon>
                    <template #title>
                        <span>系统管理</span>
                    </template>
                </el-menu-item>

                <el-sub-menu index="2">
                    <template #title><el-icon>
                            <MoreFilled />
                        </el-icon></template>
                    <el-menu-item index="/login"><el-icon>
                            <TurnOff></TurnOff>
                        </el-icon>退出系统</el-menu-item>



                </el-sub-menu>
            </el-menu>
        </el-header>
        <el-container>
            <el-main>
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>

<style scoped>
.el-menu {
    background: linear-gradient(to right, #3b5cb7, #23cb7f);
}


.el-header {
    padding: 0px;
}

::v-deep(.el-main) {
    padding: 0px;
}

.display-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-title {
    font-size: 22px;
    color: white;
    font-weight: bold;
    float: left;
    margin-left: 15px;
    margin-right: 15px;
    line-height: 60px;

}

.el-menu-item {
    padding: 0 25px;
    cursor: pointer;
}



.flex-grow {
    flex-grow: 3;
}
</style>
